import { createRouter,
createMemoryHistory, //内存模式
createWebHistory, //历史模式
createWebHashHistory, //hash模式
} 
from 'vue-router'
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 关闭进度条小圈
NProgress.configure({ showSpinner: false });         

// 动态导入(实现代码体积分割：按需加载)
// 静态导入：import xxx from 'xxx'
const HomeView = () => import('../views/HomeView.vue')
const AboutView = () => import('../views/AboutView.vue')
const HeroView = () => import('../views/HeroView.vue')
const OldHero = () => import('../views/OldHero.vue')
const NewHero = () => import('../views/NewHero.vue')
const NotFoundView = () => import('../views/error/NotFoundView.vue')
const OrderView = () => import('../views/OrderView.vue')

const routes = [
  // 路由重定向 redirect:
  { path: '/', redirect: '/Home' },
  // 路由元信息meta
  { path: '/Home', component: HomeView, meta: { title: "首页"} },
  { path: '/about', component: AboutView, name: 'gy', meta: { title: "关于" }},
  { path: '/Hero', 
    component: HeroView,
    children:[
      { path: 'old', component: OldHero, meta: { title: "旧主角" }},
      { path: 'new', component: NewHero, meta: { title: "新主角" }},
    ],
    meta: { title: "主角" }
  },
  // 路由参数
  { path: "/order/:username/:age", component: OrderView, meta: { title: "菜单" }},
  // 匹配任意路由 可以实现404页面
  { path: '/:pathMatch(.*)*', component: NotFoundView },
]

// 创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  // console.log("前置守卫");
  NProgress.start();
  next();
});
// 全局后置守卫
router.afterEach((to, from) => {
  // console.log("后置守卫");
  NProgress.done();
});

export default router;